import { Link, NavLink } from 'react-router-dom'
const Header = () => {
  return (
    <>
      <NavBar />
      <NavGation />
    </>
  )
}
// NavBar区域
const NavBar = () => {
  const navText = ['豆瓣', '读书', '电影', '音乐', '同城', '小组', '阅读', 'FM', '时间', '豆品']
  return (
    <>
      <div className="d-flex navBar-bg f-size-12 l-height">
        <ul className="nav-bar col-10 d-flex">
          {navText.map((item, index) => (
            <li key={index} className="mr-4">
              <NavLink to={''} className="navColor-a">
                {item}
              </NavLink>
            </li>
          ))}
        </ul>
        <div className="col-2 d-flex justify-content-center">
          <NavLink to={''} className="mr-4 navColor-a">
            下载豆瓣客户端
          </NavLink>
          <NavLink to={''} className="navColor-a">
            登录/注册
          </NavLink>
        </div>
      </div>
    </>
  )
}
// Nav导航栏
const NavGation = () => {
  const navGationText = [
    { path: '/buyticket', title: '影讯&购票' },
    { path: '/choiceMovie', title: '选电影' },
    '电视剧',
    { path: '/ranking', title: '排行榜' },
    '分类',
    '影评',
    '2021年度榜单',
    { path: '/classify', title: '2021书影音报告' },
  ]
  return (
    <div className="navGation mb-6 gation-bg">
      <div className="navSearch">
        <div className="Search-con">
          <Link className="db-logo mr-3" to={'/'}></Link>
          <div className="serachBox">
            <input type="text" placeholder="搜索电影、电视剧、综艺、影人" className="serach-put" />
            <div className="btn-icon"></div>
          </div>
        </div>
      </div>
      <div className="navGation-ul">
        <ul className="d-flex navSearch">
          {navGationText.map((item, index) => (
            <li key={index} className="mr-4 f-size-14">
              <NavLink to={item.path ? item.path : ''} className="navColor-gation">
                {item.title ? item.title : item}
              </NavLink>
            </li>
          ))}
        </ul>
        <a href="" className="moveYearNotice"></a>
      </div>
    </div>
  )
}

export default Header
